﻿@{
    ViewBag.Title = "Thông tin sản phẩm";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@using System.Text;
@model IEnumerable<EC_ASS.Models.DealsModel>
@* Get item *@
@{
    var deal = ViewBag.DealDetail;
}

<div class="container" style="margin-top: 50px;">
    <div class="row">
        <div class="span4">
            <div class="flexslider flexslider-center-mobile flexslider-simple" data-plugin-options='{"animation":"slide", "animationLoop": true, "maxVisibleItems": 1}'>
                <ul class="slides">
                    @* Get detail images *@
                    @foreach (string item in ViewBag.ImgList)
                    {
                        <li>
                            <a href="@Url.Content("~/" + @item)" class="zoompleFixed">
                                <img alt="" src="@Url.Content("~/" + @item)">
                            </a>
                        </li>
                    }
                </ul>
                <p class="countdown styled" id="@deal.DealResult.ID">
                </p>
            </div>
            <div style="margin-top: -30px;">
                <div class="fb-like" data-href="@Request.RawUrl" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false"></div>
                <!-- Place this tag where you want the +1 button to render. -->
            </div>
        </div>
        <div class="span8">
            <div class="row">
                <div class="span2 alert alert-info">
                    @(deal.DealResult.Price - (deal.DealResult.Price * deal.Discount) / 100) VNĐ - (Còn hàng)
                </div>
            </div>
            <hr />
            <div class="row">
                <div class="span6">
                    <form action="/Product/@deal.DealResult.ID/@ToUrlName(deal.DealResult.Name)/Buy" method="post" name="productForm">
                        <div class="row controls">
                            <div class="span3 control-group">
                                <label>Chọn size</label>
                                @foreach (string item in ViewBag.Size)
                                {
                                    if (String.IsNullOrEmpty(item))
                                    {

                                    }
                                    else
                                    {
                                    <label class="radio inline">
                                        <input required type="radio" name="Size" value="@item">@item
                                    </label>
                                    }
                                }
                            </div>
                            <div class="span3 control-group">
                                <div class="control-group">
                                    <label class="control-label">Số lượng cần mua</label>
                                    <div class="controls">
                                        <div class="input-prepend input-append">
                                            <input type="button" class="btn" onclick="this.form.appendedPrependedDropdownButton.value--;" value="-">
                                            <input min="1" max="@(deal.DealResult.NumOfProduct - deal.DealResult.NumOfSold)" class="span1" id="appendedPrependedDropdownButton" 
                                                type="text" name="Quantity" readonly="readonly" value="1" data-validation-min-message="Mua ít nhất 1 sản phẩm"
                                                data-validation-max-message="Tối đa @(deal.DealResult.NumOfProduct - deal.DealResult.NumOfSold) sản phẩm">
                                            <input type="button" class="btn" onclick="this.form.appendedPrependedDropdownButton.value++;" value="+">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="span3 control-group">
                                <label><a href="#" rel="tooltip" data-title="Vui lòng để trống nếu bạn không có" style="text-decoration: none;">Mã giảm giá</a></label>
                                <input type="text" name="Code" value="" />
                            </div>
                            <div class="span7 control-group">
                                <input type="submit" value="Đặt mua" class="btn" />
                            </div>
                        </div>
                    </form>
                </div>
                <div class="span7">
                    <ul id="myTab" class="nav nav-tabs">
                        <li class="active"><a href="#description" data-toggle="tab">Thông tin sản phẩm</a></li>
                        <li><a href="#source" data-toggle="tab">Xuất xứ</a></li>
                        <li><a href="#rate" data-toggle="tab">Nhận xét</a></li>
                    </ul>
                    <div id="myTabContent" class="tab-content">
                        <div class="tab-pane fade in active" id="description">
                        </div>
                        <div class="tab-pane fade" id="source">
                            <p>@deal.DealResult.Source</p>
                        </div>
                        <div class="tab-pane fade" id="rate">
                            <div id="commentList">
                                <div class="span2">
                                    <img class="thumbnail" src="@Url.Content("~/img/locmx.png")" title="Min Tun"/>
                                </div>
                                <div class="span5 well">
                                    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<hr />
<div class="container">
    <h4>Các sản phẩm đang khuyến mãi <a href="#" class="btn" style="float: right;">Xem thêm</a></h4>
    <div class="row">
        <ul class="portfolio-list sort-destination" data-sort-id="portfolio">
            @foreach (var item in Model)
            {
                <li class="span2 isotope-item ao">
                    <div class="portfolio-item thumbnail">
                        <a href="/Product/@item.DealResult.ID/@ToUrlName(item.DealResult.Name)/Info" class="thumb-info">
                            <img alt="" src="@Url.Content("~/" + item.DealResult.Picture)" />
                            <span class="thumb-info-title">
                                <span class="thumb-info-inner">@item.DealResult.Name</span>
                                <span class="thumb-info-type">@item.DealResult.Price VNDĐ</span>
                            </span>
                            <span class="thumb-info-action">
                                <span title="Xem chi tiết" href="#" class="thumb-info-action-icon"><i class="icon-link"></i></span>
                            </span>
                        </a>
                        <p class="alert alert-success">Còn 2 ngày</p>
                    </div>
                </li>
            }
        </ul>
    </div>
</div>
@functions {
    string ToUrlName(string name)
    {
        string stFormD = name.Normalize(NormalizationForm.FormD);
        StringBuilder sb = new StringBuilder();
        for (int ich = 0; ich < stFormD.Length; ich++)
        {
            System.Globalization.UnicodeCategory uc = System.Globalization.CharUnicodeInfo.GetUnicodeCategory(stFormD[ich]);
            if (uc != System.Globalization.UnicodeCategory.NonSpacingMark)
            {
                sb.Append(stFormD[ich]);
            }
        }
        sb = sb.Replace('Đ', 'D');
        sb = sb.Replace('đ', 'd');
        return (sb.ToString().Normalize(NormalizationForm.FormD).ToUpperInvariant().Trim().Replace(" ", "-"));
    }
}
<script src="@Url.Content("~/js/jquery.countdown.js")"></script>
<!-- Time count down -->
<script type="text/javascript">
    $(function () {
        var endDate = "@ViewBag.ExpiredTime";
        $('#@deal.DealResult.ID').countdown({
            date: endDate,
            render: function (data) {
                $(this.el).html("<div>" + this.leadingZeros(data.days, 2) + " <span>Ngày</span></div><div>" + this.leadingZeros(data.hours, 2) + " <span>Giờ</span></div><div>" + this.leadingZeros(data.min, 2) + " <span>Phút</span></div><div>" + this.leadingZeros(data.sec, 2) + " <span>Giây</span></div>");
            }
        });
    });
</script>

